<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef">
      <template #operationBeforeExtend="{ record }">
        <a-link @click="getTable(record)">
          <icon-zoom-out />
          查看表
        </a-link>
      </template>
      <template #formBeforeButtons="{ form }">
        <a-button @click="test(form)">测试连接</a-button>
      </template>
    </ma-crud>
    <a-drawer
      width="70%"
      :visible="visibleTable"
      @ok="visibleTable = !visibleTable"
      @cancel="visibleTable = !visibleTable"
      unmountOnClose
    >
      <template #title />
      <ma-crud :columns="tableColumn" :data="tableData" scrollbar ref="tableRef">
        <template #view_fields="{ record }">
          <!-- 对标题加上 tag -->
          <a-link @click="getFields(record)">查看字段</a-link>
          <a-link @click="getPrviewData(record)"> 预览数据 </a-link>
          <a-link @click="getPrviewData(record)"> 创建数据集 </a-link>
        </template>
      </ma-crud>
    </a-drawer>

    <a-drawer
      :width="drawer || '50%'"
      :visible="visibleFields"
      @ok="visibleFields = !visibleFields"
      @cancel="visibleFields = !visibleFields"
      unmountOnClose
    >
      <template #title />
      <ma-crud :pagination="false" :columns="fieldsColumn" :data="fieldsData" scrollbar ref="tableRef">
        <template #view_fields="{ record }">
          <!-- 对标题加上 tag -->
          <a-link @click="getFields(record)">查看字段</a-link>
        </template>
      </ma-crud>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue"
import api from "../api/source"

const crudRef = ref()
import { Message } from "@arco-design/web-vue"
import { dataSourceType } from "@/utils/dict.js"

const crud = reactive({
  api: api.getPageList,
  recycleApi: api.getRecyclePageList,
  showIndex: false,
  searchColNumber: 3,
  pageLayout: "fixed",
  rowSelection: { showCheckedAll: true },
  operationColumn: true,
  operationColumnWidth: 250,
  add: { show: true, api: api.save, auth: ["/datasource/DataSource/save"] },
  edit: {
    show: true,
    api: api.update,
    auth: ["/datasource/DataSource/update"]
  },
  delete: {
    show: true,
    api: api.delete,
    auth: ["/datasource/DataSource/destroy"],
    realApi: api.realDestroy,
    realAuth: ["/datasource/DataSource/realDestroy"]
  },
  recovery: {
    show: true,
    api: api.recovery,
    auth: ["/datasource/DataSource/recovery"]
  },
  formOption: {
    width: 800,
    viewType: "drawer"
  }
})

const columns = reactive([
  {
    title: "数据源名称",
    dataIndex: "name",
    width: 180,
    search: true,
    addDisplay: true,
    editDisplay: true,
    hide: false,
    formType: "input",
    commonRules: [{ required: true, message: "数据源名称必填" }]
  },
  {
    title: "数据库名称",
    dataIndex: "database",
    width: 180,
    search: false,
    addDisplay: true,
    editDisplay: true,
    hide: false,
    formType: "input",
    commonRules: [{ required: true, message: "数据库名称必填" }]
  },
  {
    title: "数据源类型",
    dataIndex: "type",
    width: 180,
    search: true,
    addDisplay: true,
    editDisplay: true,
    hide: false,
    formType: "select",
    dict: {
      data() {
        return dataSourceType
      },
      translation: true
    },
    commonRules: [{ required: true, message: "数据源类型必填" }]
  },
  {
    title: "主机地址",
    dataIndex: "hostname",
    width: 180,
    search: true,
    addDisplay: true,
    editDisplay: true,
    hide: false,
    formType: "input",
    commonRules: [{ required: true, message: "主机地址必填" }]
  },
  {
    title: "端口号",
    dataIndex: "hostport",
    width: 180,
    search: false,
    addDisplay: true,
    editDisplay: true,
    hide: false,
    formType: "input-number",
    commonRules: [{ required: true, message: "端口号必填" }]
  },
  {
    title: "用户名",
    dataIndex: "username",
    width: 180,
    search: true,
    addDisplay: true,
    editDisplay: true,
    hide: false,
    formType: "input",
    commonRules: [{ required: true, message: "用户名必填" }]
  },
  {
    title: "密码",
    dataIndex: "password",
    width: 180,
    search: false,
    addDisplay: true,
    editDisplay: true,
    hide: false,
    formType: "input-password",
    commonRules: [{ required: true, message: "密码必填" }]
  },
  {
    title: "",
    dataIndex: "remark",
    width: 180,
    search: false,
    addDisplay: false,
    editDisplay: false,
    hide: true,
    formType: "input",
    commonRules: [{ required: false, message: "必填" }]
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    width: 180,
    search: false,
    addDisplay: false,
    editDisplay: false,
    hide: true,
    searchFormType: "range",
    showTime: true,
    formType: "date",
    commonRules: [{ required: false, message: "创建时间必填" }]
  },
  {
    title: "更新时间",
    dataIndex: "update_time",
    width: 180,
    search: false,
    addDisplay: false,
    editDisplay: false,
    hide: true,
    searchFormType: "range",
    showTime: true,
    formType: "date",
    commonRules: [{ required: false, message: "更新时间必填" }]
  },
  {
    title: "创建人",
    dataIndex: "created_by",
    width: 180,
    search: false,
    addDisplay: false,
    editDisplay: false,
    hide: true,
    formType: "input",
    commonRules: [{ required: false, message: "创建人必填" }]
  },
  {
    title: "",
    dataIndex: "updated_by",
    width: 180,
    search: false,
    addDisplay: false,
    editDisplay: false,
    hide: true,
    formType: "input",
    commonRules: [{ required: true, message: "必填" }]
  }
])

const test = (form) => {
  api.testConnect(form).then((res) => {
    Message.success("连接成功")
  })
}

const visibleTable = ref(false)
const tableData = ref([])
const tableColumn = ref([
  {
    title: "表名",
    dataIndex: "table_name",
    search: true
  },
  {
    title: "表注释",
    dataIndex: "table_comment",
    search: true
  },
  {
    title: "行数",
    dataIndex: "table_rows"
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    formType: "date"
  },
  {
    title: "操作",
    dataIndex: "view_fields",
    width: 180
  }
])
const getTable = (record) => {
  Message.loading("加载中...")
  api.datasourceGetTable({ datasource_id: record.id }).then((res) => {
    visibleTable.value = !visibleTable.value
    tableData.value = res.data
  })
}

const visibleFields = ref(false)
const drawer = ref("50%")
const fieldsData = ref([])
const fieldsColumn = ref([])
const getFields = (form) => {
  Message.loading("加载中...")
  api
    .getFieldsList({
      datasource_id: form.datasource_id,
      table_name: form.table_name
    })
    .then((res) => {
      drawer.value = "50%"
      visibleFields.value = !visibleFields.value
      fieldsData.value = res.data
      fieldsColumn.value = [
        {
          title: "字段名称",
          dataIndex: "name"
        },
        {
          title: "字段类型",
          dataIndex: "type"
        },
        {
          title: "字段注释",
          dataIndex: "comment"
        },
        {
          title: "是否自增",
          dataIndex: "autoinc"
        },
        {
          title: "是否主键",
          dataIndex: "primary"
        }
      ]
    })
}
const getPrviewData = (form) => {
  Message.loading("加载中...")
  api
    .previewData({
      datasource_id: form.datasource_id,
      table_name: form.table_name
    })
    .then((res) => {
      drawer.value = "80%"
      visibleFields.value = !visibleFields.value
      fieldsData.value = res.data.data
      fieldsColumn.value = res.data.data.length
        ? Object.keys(res.data.data[0]).map((item) => {
            return {
              title: item,
              dataIndex: item
            }
          })
        : []
    })
}
</script>
